<template>
	<div class="header">
		<Scroll class="wrapper"> 
			<div>
			<!--轮播图-->
				<div>
					<Swiper v-if="pages.length > 0" :autoPlay='true' :showIndicator='true' interval="2500" duration="500">
						<Slide v-for="(item,index) in pages" :key="index">
							<div class="Shuffling">
								<img :src="item" class="cir" />
							</div>
						</Slide>
					</Swiper>
				</div>
				<!--热销类目-->
				<div class="category">
					<div class="title">
						<span class="line"></span>
						<h3 class="cakes">热销类目</h3>
						<span class="line"></span>
					</div>
					<ul class="list">
						<li v-for="item in Typesfood">
							<img :src="item.img" class="list-img"/>
							<h3>{{item.name}}</h3>
						</li>
					</ul>
				</div>
				<div class="Detonation">
					<div class="title">
						<span class="line"></span>
						<h3 class="cakes">爆品推荐</h3>
						<span class="line"></span>
					</div>
					<ul class="recommended-img">
						<li v-for="item in recommended" class="Productdations">
							<img src="../../assets/F-img/爆品.png" class="redfast"/>
							<img :src="item.img" class="Productdations-list"/>
							<h3 class="Productdations-title">{{item.name}}</h3>
							<h3 class="maney">{{item.maney}}</h3>
						</li>
					</ul>
				</div>
				<h3 class="Without">亲,就这么多了</h3>
			</div>
		</Scroll>
	</div>
</template>

<script>
	import Scroll from "../../../base/Scroll"
	import Slide from "../../../base/ZSlide"
	import Swiper from "../../../base/ZSwiper"
	export default{
		name:"food",
		data(){
			return{
				Typesfood:[
				
//				{img:require("../../assets/F-img/糖果.png"),name:"糖果"},
//				{img:require("../../assets/F-img/薯条.png"),name:"薯条"},
//				{img:require("../../assets/F-img/方便面.png"),name:"方便面"},
//				{img:require("../../assets/F-img/巧克力.png"),name:"巧克力"},
				],
				recommended:[
//				{img:require("../../assets/F-img/野生蓝莓果汁饮料.png"),name:"野生蓝莓果汁饮料",maney:"¥100"},
//				{img:require("../../assets/F-img/原味坚果.png"),name:"原味坚果",maney:"¥100"},
//				{img:require("../../assets/F-img/野生蓝莓果汁饮料.png"),name:"野生蓝莓果汁饮料",maney:"¥100"},
//				{img:require("../../assets/F-img/原味坚果.png"),name:"原味坚果",maney:"¥100"},
				],
				pages: [],
			}
		},
		created:function(){
			this.axios.post("/api/foodzone").then(function(data){
				console.log(data);
				this.pages = data.data.foodArr.img;
				this.Typesfood = data.data.foodArr.aaa;
				this.recommended = data.data.foodArr.drinks;
			}.bind(this));	
		},
		components:{
			Scroll,
			Swiper,
			Slide
		}
	}
</script>

<style scoped="scoped">
	.Shuffling{
		width: 100%;
		height: 100%;
	}
	.cir{
		width: 100vw;
		height: 30vh;
		/*height: 100%;*/
	}
	.wrapper{
		height: 75vh;
		overflow: hidden;
	}
	.wrapper>div{
		overflow: hidden;
	}
	.header{
		height: 100%;
		background-color: #efefef;
	}
	.category{
		background-color: white;
		border-top:1px solid #c1c1c1;
		border-bottom:1px solid #c1c1c1;
		margin-top: 1rem;
	}
	.Detonation{
		background-color: white;
		border-top:1px solid #c1c1c1;
		border-bottom:1px solid #c1c1c1;
		margin-top: 1rem;
	}
	.title{
		text-align: center;
		padding-bottom: 2rem;
		padding-top: 0.5rem;
		
	}
	.line{
		width: 15%;
		height: 0.1%;
		border-top: 1px solid #c1c1c1;
		display: inline-block;
		vertical-align: middle;
	}
	.cakes{
		font-size: 1.5rem;
		color: #3d3d3d;
		vertical-align: middle;
		display: inline-block;
		font-weight: 400;
		
	}
	.list{
		text-align: center;
	}
	.list li{
		width: 15%;
		display: inline-block;
		padding: 0.5% 5%;
		
	}
	.list h3{
		font-size: 1.2rem;
		margin-top: 1rem;
		margin-bottom: 1.5rem;
	}
	.list-img{
		width: 100%;
		height: 5rem;
		display: inline-block;
	}
	.Productdations{
		width: 44%;
		height: 14rem;
		margin-bottom: 1rem;
	}
	.Productdations-list{
		width: 60%;
		height: 50%;
		vertical-align: top;
		line-height: 10rem;
		margin-top: 1.2rem;
	}
	.Productdations-title{
		margin-top: 1.3rem;
		font-size: 1.5rem;
		text-align: center;
	}
	.maney{
		font-size: 1.5rem;
		color: red;
		font-weight: 200;
		text-align: center;
	}
	.recommended-img li{
		display: inline-block;
		border: 1px solid #c1c1c1;
		margin-left:3.5%;
	}
	.redfast{
		width: 15%;
		display: inline-block;
		vertical-align: top;
		text-align: left;
	}
	.Without{
		margin-top: 0.5rem;
		text-align: center;
		margin-bottom: 0.5rem;
		font-size: 1.3rem;
		font-weight: 400;
	}
</style>